Responsive Card Slider Website | With Modals and Content Search Function 🔍 - Html, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Responsive Modern Card Slider Website | With Card Related Modals and Content Search Function 🔍 - Html, CSS & Javascript

In this video, you can learn how to design a responsive card slider website with card-related modals using HTML, CSS and Javascript. Additionally, the web page includes a content search function to open models through search results. Also, you can see web page elements reveal and hide animations to make it more awesome. Hope you'll enjoy this amazing project and learn something more ❤️

Clear Coding
Easy to Follow
Responsive
Modern Card Slider (Draggable with Navigation)
Popup Modals
Hover Effects
Content Search Function With Search Results
Elements Reveal/Hide Animations

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Card/Image Slider Website | With Modals And Content Search Function - Html, Css & Javascript</title>
  
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  
  <link rel="stylesheet" href="css/style.css">
  
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
  </head>
<body>
  
  
  <section class="main">

</section>

<script src="js/swiper-bundle.min.js"></script>

<script src="js/main.js"></script>

</body>
</html>

style.css

/*========== Google fonts ==========*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');

:root{
  /*======= Main colors =======*/
  --first-color: #222;
  --second-color: #fff;
  
  /*======= Background colors =======*/
  --body-bg-color: #fefefe;
  --light-gray-bg-color: #eee;
  
  /*======= Other font colors =======*/
  --light-gray-font-color: #dadcdd;
  --dark-gray-font-color: #777;
  
  /*======= Hover colors =======*/
  --hover-red-color: #fe5578;
  --hover-dark-color: #010101;

/*======= Transparent bg colors =======*/
  --transparent-white-bg-color-01: rgba(255, 255, 255, .25);
  --transparent-white-bg-color-02: rgba(255, 255, 255, .1);

/*======= Border color =======*/
  --gray-border-color: #ccc;

/*======= Box shadow =======*/
  --box-shadow: 0 5px 25px rgba(0, 0, 0, .35);

/*======= Card bg gradient colors =======*/
  --mercury-bg: linear-gradient(45deg, #394147, #767f85);
  --venus-bg: linear-gradient(45deg, #ac1013, #e37b62);
  --earth-bg: linear-gradient(45deg, #005192, #0ea7eb);
  --mars-bg: linear-gradient(45deg, #ad1c1f, #e57a35);
  --jupiter-bg: linear-gradient(45deg, #ae5f4e, #e28482);
  --saturn-bg: linear-gradient(45deg, #a04b36, #d1977c);
  --uranus-bg: linear-gradient(45deg, #02396f, #0f81ad);
  --neptune-bg: linear-gradient(45deg, #09225a, #4ab5e1);

/*======= Scroll bar colors =======*/
  --scroll-bar-color: #f1f1f1;
  --scroll-bar-thumb-color: #555;
  --scroll-bar-thumb-hover-color: #444;
}

/*========== Main CSS ==========*/
*{
  font-family: 'Poppins', sans-serif;
}

/*========== Header CSS ==========*/

/*===== Logo =====*/

/*===== Search box =====*/

/*===== Main menu =====*/

/*========== Slider main CSS ==========*/

/*========== Slider cards CSS ==========*/

/*========== Slider navigation CSS ==========*/

/*========== Main social media links CSS ==========*/

/*========== Modals CSS ==========*/

/*========== Media queries (max-width: 1220px) ==========*/
@media screen and (max-width: 1220px){
  /*========== Modals CSS ==========*/

}

/*========== Media queries (max-width: 980px) ==========*/
@media screen and (max-width: 980px){
  /*===== Search box =====*/

}

/*========== Media queries (max-width: 926px) ==========*/
@media screen and (max-width: 926px){
  /*========== Slider navigation CSS ==========*/

/*========== Main social media links CSS ==========*/

/*========== Modals CSS ==========*/

}

/*========== Media queries (max-width: 750px) ==========*/
@media screen and (max-width: 750px){
  /*========== Header CSS ==========*/

/*===== Logo =====*/

/*========== Modals CSS ==========*/

}

/*========== Media queries (max-width: 700px) ==========*/
@media screen and (max-width: 700px){
  /*===== Main menu =====*/

/*========== Main social media links CSS ==========*/

/*========== Modals CSS ==========*/

}

/*========== Media queries (max-width: 450px) ==========*/
@media screen and (max-width: 450px){
  /*===== Logo =====*/

/*===== Search box =====*/

/*===== Main menu =====*/

/*========== Modals CSS ==========*/

}

/*========== Media queries (max-width: 370px) ==========*/
@media screen and (max-width: 370px){
  /*========== Header CSS ==========*/
  
  /*===== Search box =====*/

/*===== Main menu =====*/

/*========== Slider cards CSS ==========*/

/*========== Modals CSS ==========*/

}

main.js

Buy This Project Complete Source Files from Here -

https://www.buymeacoffee.com/codingsnow/e/223738

Download File Setup

If the download didn't start automatically, click here.

Monday, February 26, 2024

Responsive Card Slider Website | With Modals and Content Search Function 🔍 - Html, CSS & Javascript

Description

Source Codes

index.html

style.css

main.js

Post a Comment

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Monday, February 26, 2024

Responsive Card Slider Website | With Modals and Content Search Function 🔍 - Html, CSS & Javascript

Description

Source Codes

index.html

style.css

main.js

Post a Comment

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form